<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <link rel="stylesheet" href="css/css_09首页示例.css">
</head>
<body>
    <!-- ==================header头部========================= -->
    <div id="header">
        <div class="logo">
            <a href=""> <img src="images/0742847dfed41e81.png" alt=""></a>
        </div>
        <div class="search">
            <form action="">
                <input type="text" class="keyword">
                <input type="submit"  value="搜索" class="searchBtn">
            </form>
        </div>
        <div class="login">
            <a href="">注册</a>
            <a href="">登录</a>
        </div>
    </div>
    <!-- ===================导航 nav=============================== -->
     <div class="nav">
        <ul>
            <li><a href="">手机馆</a></li>
            <li><a href="">司法拍卖</a></li>
            <li><a href="">手机馆</a></li>
            <li><a href="">手机馆</a></li>
            <li><a href="">手机馆</a></li>
            <li><a href="">手机馆</a></li>
            <li><a href="">手机馆</a></li>
        </ul>
     </div>

    <!-- ====================横幅=================== -->
     <div class="banner">
        <a href=""> 
            <img src="images/01217514880511ebb6edd017c2d2eca2.jpg" alt="">
        </a>
     </div>
     <!-- ==================热门商品=========== -->
     <h2 class="hot-title">热门商品</h2>

<!-- ==================热门商品列表=========== -->
 <div class="hot-pro">
    <ul>
        <li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li>
        <li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li>
        <li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li><li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li><li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li><li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li><li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li><li> 
            <a href="">
                <img src="images/iphone.jpg" alt=""> 
                <p class="pro_name">Apple</p>
                <p class="pro_price">
                    <span>￥</span>
                    <span class="pro_price">5999</span>
                </p>
            </a>
        </li>
    </ul>
 </div>
</body>
</html>